import { memo } from "react";
import { Radio, RadioChangeEvent } from "antd";
import styles from "./index.module.css";
import { RadioProp } from "../../type/radio";

const Index = (props: RadioProp) => {
  const { list, onChange: propChange } = props;
  const onChange = (e: RadioChangeEvent) => {
    propChange && propChange(e.target.value);
  };
  return (
    <div className={styles.radioContainer}>
      <Radio.Group onChange={onChange} defaultValue="">
        {list.map((ite) => {
          return (
            <Radio.Button key={`${ite.label}-${ite.value}`} value={ite.value}>
              {ite.label}
            </Radio.Button>
          );
        })}
      </Radio.Group>
    </div>
  );
};

export default memo(Index);
